.layer {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transition: all 0.4s;
    opacity: 0;
    .content {
      position: fixed;
      background: #fff;
      width: 100%;
      overflow: hidden;
      transition: all 0.4s;
      opacity: 0;
    }
    .toTop {
      left: 0;
      bottom: 0;
      height: auto;
      border-top-left-radius: 2vw;
      border-top-right-radius: 2vw;
      transform: translateY(100%);
    }
    .toLeft {
      height: 100vh;
      left: 100vw;
      top: 0;
    }
    .toRight {
      height: 100vh;
      left: -100vw;
      top: 0;
    }
  
    &.active {
      opacity: 1;
      .content {
        opacity: 1;
      }
      .toTop {
        transform: translateY(0);
      }
      .toLeft {
        left: 0;
      }
      .toRight {
        left: 0;
      }
    }
  }